<template>
  <div>
  <el-drawer title="修改白名单信息" :visible.sync="dialogFormVisible" size="25%">
    <el-form
      ref="formInline"
      :inline="true"
      :model="formInline"
      :rules="rules"
      :label-position="labelPosition"
      label-width="100px"
      size="small"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="url地址:" prop="url">
            <el-input
              v-model="formInline.url"
              :style="{ width: '140%' }"
              placeholder="请输入url地址"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    <el-row>
        <el-col :span="24">
           <el-form-item label="请求方式" prop="method">
              <el-select v-model="formInline.method" placeholder="请选择请求方式">
              <el-option
                v-for="item in methodOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="是否激活:" prop="enable_datasource">
              <el-radio-group v-model="formInline.enable_datasource">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:" prop="description">
            <el-input
              style="width: 140%"
              type="textarea"
              maxlength="125" 
              show-word-limit
              v-model="formInline.description"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="demo-drawer__footer" style="padding-left: 100px;">
      <el-button @click="resetForm('formInline')">取 消</el-button>
      <el-button type="primary" @click="submitEditForm('formInline')">修 改</el-button>
    </div>
  </el-drawer>
  </div>
</template>

<script>
  import { editWhiteListData } from '@/api/whiteList'
  import { successMsg,errmsg } from '@/utils/tools'
  export default {
    name: 'Edit',
    data() {
      return {
        dialogFormVisible: false,
        labelPosition:'right',
        methodOptions:[{
          name:'GET',
          value:0
        },{
          name:'POST',
          value:1
        },{
          name:'PUT',
          value:2
        },{
          name:'DELETE',
          value:3
        }],
        formInline: {
          // parent: '',
          // name: '',
          // owner:'',
          // phone:'',
          // email:'',
          // status:true,
          // sort:0
        },
        rules:{
          url:[
            { required: true, message: '请输入url地址', trigger: 'blur' },
          ],
          method:[
            { required: true, message: '请选择请求方式', trigger: 'change' },
          ],
        }
      };
    },
    methods:{
      submitEditForm(formName) {
        this.$refs[formName].validate((valid) => {
          if(valid){
            editWhiteListData(this.formInline).then(res=>{
              if(res.code===2000) {
                successMsg(res.msg)
                this.$emit('reloadTable')
                this.dialogFormVisible = false
              }
            })
          }else{
            return false;
          }
        });
      },
      resetForm(formName){
        this.$refs[formName].resetFields();
        this.dialogFormVisible = false
      },
    }
  }
</script>

<style>
  .main-select-el-tree .el-tree-node .is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
  .main-select-el-tree .el-tree-node.is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
</style>
